<template>
  <!--测试 文件夹-->

  <div>
    <div class="container" v-loading="loading">
      <div class="folder">
        <h3>分类列表</h3>
        <el-input type="textarea" :autosize="{minRows:25,maxRows:25}" disabled style="margin-top: 10px" v-model="classification">

        </el-input>
      </div>
      <div class="left">

        <div class="image">
          <el-image v-if="imgPath.length>0"  :src="imgPath" style="width: 100%;max-height: 100%"/>
        </div>
        <div class="result">
          <el-input type="textarea" rows="5" disabled style="color: #111111" v-model="distinguishResult.classLabel"></el-input>
        </div>
        <div style="margin-top: 10px;float: right">
          <el-upload
              class="upload-demo inline-block"
              action="http://localhost:1234/classification/upload"
              :data="query"
              :on-success="onSuccess"
              :file-list="fileList"
              :before-upload="beforeUpload"
              :show-file-list="false"
              :auto-upload="true"
              :drag="false"
          >
            <el-button size="small" type="primary">选择图片</el-button>
          </el-upload>
          <el-button type="primary" @click="distinguish" >开始识别</el-button>
        </div>
      </div>

    </div>

  </div>

</template>

<script>
import {getAll,distinguishImg} from "../../api/classification";

export default {
  name: "distinguish",
  data(){
    return{
      loading:false,
      path:"",
      imgPath:"",
      classificationList:[],
      classification:"",
      query:{
        fileName:""
      },
      fileList:[],
      distinguishResult:{}
    }
  },
  created() {
    //查询所有的额分类
    getAll().then(result=>{
      this.classificationList = result.data
      this.classificationList.forEach((item,index)=>{
        this.classification = this.classification+item.classId+"、"+item.classLabel+"\n"
      })
    })
  },
  methods:{
    beforeUpload(){
      const str = Math.random().toString(36).substr(2, 15);
      const fileName = str+".png"
      this.query.fileName = fileName
    },
    onSuccess(response){
      this.imgPath = response.data
    },
    distinguish(){
      this.loading = true
      distinguishImg(this.query).then(result=>{
        this.distinguishResult = result.data
        this.loading=false
      })
    }
  }
}
</script>
<style>
.folder{
  box-shadow: 1px 1px 10px #979a9e;
  width: 23%;
  padding: 30px;
  border-radius: 5px;

}
.container{
  display: flex;
  flex-wrap: wrap;

}
.left{
  margin-left: 40px;
  width: 67%;
}
.result{
  margin-top: 20px;
  width: 100%;
}
.image{
  width: 93%;
  box-shadow: 1px 1px 10px #979a9e;

  padding: 30px;
  border-radius: 5px;
  color: white;
  height: 400px;
}

.inline-block {
  display: inline-block;
}
.el-upload {
  display: inline;
  text-align: center;
  cursor: pointer;
  outline: 0;
}
 .upload-demo {
  display: inline;
   margin-right: 20px;
}
</style>
